<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>使用HTML/CSS实现一个复杂页面</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<header class="top">
		<h1></h1>
		<button class="login iconfont">&#xe60e;登录</button>
		<div class="input-group">
			<button class="iconfont">&#xe606;</button><input type="text" name="search">
		</div>
	</header>
	<section class="wrap clear">
		<aside>
			<header>
				<h2><strong class="head-portrait"></strong><strong class="user-name">ABC123</strong></h2>
				<p><span>110<br>收藏</span><span>312<br>粉丝</span></p>
			</header>
			<nav>
				<ul>
					<li>
						<a class="iconfont" href="###">&#xe632;&nbsp;个人报表</a>
							<ul>
								<li><a href="###" class="iconfont">&#xe7b2;文件一</a></li>
								<li>
									<a href="###" class="iconfont">&#xe7b2;文件二</a>
									<ul>
										<li><a href="###" class="iconfont">&#xe6db;文档1</a></li>
										<li><a href="###" class="iconfont">&#xe6db;文档2</a></li>
									</ul>
									
								</li>
								<li><a href="###" class="iconfont">&#xe7b2;文件三</a></li>
							</ul>
						
					</li>
					<li><a class="iconfont" href="###">&#xe60c;&nbsp;个人收藏</a></li>
					<li><a class="iconfont" href="###">&#xe681;&nbsp;我的分享</a></li>
					<li><a class="iconfont" href="###">&#xe60c;&nbsp;图库</a></li>
					<li><a class="iconfont" href="###">&#xe60c;&nbsp;成长记录</a></li>
					<li><a class="iconfont" href="###">&#xe617;&nbsp;账户信息</a></li>
				</ul>
			</nav>
		</aside>
		<section class="main">
			<div class="path">
				<a href="###">C站</a> /
				<a href="###">个人报表</a> /
				<a href="###">文件一</a> /
				<a href="###">文档一</a>
			</div>
			<form class="query clear">
				<div class="option">
					<label>查询项</label>
					<select class="iconfont">
						<option value="">第一项</option>
						<option value="">第二项</option>
						<option value="">第三项</option>
					</select>
				</div>
				<div class="trader">
					<label>买方</label>
					<select>
						<option value="">小A</option>
					</select>
					<label>卖方</label>
					<select>
						<option value="">小C</option>
					</select>
					<a href="###" class="change">换</a>
				</div>
				<div class="details">
					<label for="">日期</label>
					<select class="date">
						<option value="">2016-04-01</option>
					</select>
					<label for="">总耗时</label>
					<select class="times">
						<option value="">8天</option>
					</select>
					<label for="">人数</label>
					<select class="persons">
						<option value="">10人</option>
					</select>
					<label for="">成交项</label>
					<select class="count">
						<option value="">10项</option>
					</select>
				</div>
				<div class="search">
					<button>搜索</button>
				</div>
			</form>
			<div class="hostory clear">
				<div class="left">
					<div>&lt;</div>
				</div>
				<div class="item">
					<div class="active">
						<p class="time">10:00 am</p>
						<p class="money"><span>¥</span><strong>1200</strong></p>
					</div>
				</div>
				<div class="item">
					<div>
						<p class="time">11:00 am</p>
						<p class="money"><span>¥</span><strong>1300</strong></p>
					</div>
				</div>
				<div class="item">
					<div>
						<p class="time">12:00 am</p>
						<p class="money"><span>¥</span><strong>1200</strong></p>
					</div>
				</div>
				<div class="item">
					<div>
						<p class="time">01:00 pm</p>
						<p class="money"><span>¥</span><strong>1400</strong></p>
					</div>
				</div>
				<div class="item">
					<div>
						<p class="time">02:00 pm</p>
						<p class="money"><span>¥</span><strong>1500</strong></p>
					</div>
				</div>
				<div class="item">
					<div>
						<p class="time">03:00 pm</p>
						<p class="money"><span>¥</span><strong>1800</strong></p>
					</div>
				</div>
				<div class="right">
					<div>&gt;</div>
				</div>
				<div class="record">
					<div>历史查询</div>
				</div>
			</div>
			<p>2016年4月份统计报告</p>
			<div class="statistics clear">
				<div class="item item-1">
					<div class="left">
 						<p class="num">133311</p>
 						<p class="text">成交量</p>
					</div>
					<div class="right"></div>
				</div>
				<div class="item item-2">
					<div class="left">
						<p class="num">133311</p>
						<p class="text">成交量</p>
					</div>
					<div class="right"></div>
				</div>
				<div class="item item-3">
					<div class="left">
						<p class="num">133311</p>
						<p class="text">成交量</p>
					</div>
					<div class="right"></div>
				</div>
				<div class="item item-4">
					<div class="left">
						<p class="num">133311</p>
						<p class="text">成交量</p>
					</div>
					<div class="right"></div>
				</div>
			</div>
			<div class="project clear">
				<div class="panel material">
					<div class="title">第一组项目</div>
					<div class="body">
						<ul class="clear">
							<li><a href="###" class="active">项目一</a></li>
							<li><a href="###">项目一</a></li>
							<li><a href="###">项目一</a></li>
							<li><a href="###">项目一</a></li>
							<li><a href="###">项目一</a></li>
						</ul>
						<div class="table">
							<table>
								<tr>
									<td>购买材料一</td>
									<td>购买材料一</td>
									<td>购买材料一</td>
									<td>购买材料一</td>
								</tr>
								<tr>
									<td>购买材料二</td>
									<td>购买材料二</td>
									<td>购买材料二</td>
									<td>购买材料二</td>
								</tr>
								<tr>
									<td>购买材料四</td>
									<td>购买材料四</td>
									<td>购买材料四</td>
									<td>购买材料四</td>
								</tr>
								<tr>
									<td>购买材料六</td>
									<td>购买材料六</td>
									<td>购买材料六</td>
									<td>购买材料六</td>
								</tr>
								<tr>
									<td>购买材料十三</td>
									<td>购买材料十三</td>
									<td>购买材料十三</td>
									<td>购买材料十三</td>
								</tr>
								<tr>
									<td>购买材料二十</td>
									<td>购买材料二十</td>
									<td>购买材料二十</td>
									<td>购买材料二十</td>
								</tr>
								
							</table>
						</div>
					</div>
				</div>
				<div class="panel presentation">
					<div class="title">第一组项目</div>
					<div class="body">
						<header>
							<h2>标题</h2>
							<h3>项目报表三</h3>
						</header>
						<div class="price">
							<div>
								<p>价格</p>
								<div>¥158</div>
							</div>
							<div>
								<p>负责人</p>
								<div>小A</div>
							</div>
						</div>
						<div class="detailed">
							<h4>详细描述</h4>
							<span>该项目目前负责人是...</span>
						</div>
						<footer>
							<input type="checkbox"> 遵守保密协议
							<button>搜索</button>
						</footer>
					</div>
				</div>
				<div class="panel date">
					<div class="title">日历</div>
					<div class="body">
						<div class="date-top">
							<div class="year">2016年<span></span></div>
							<div class="month">4月<span></span></div>
							<div class="day">标注日期<span></span></div>
							<div class="today">返回今天</div>
						</div>
						<ul class="clear">
							<li>一</li>
							<li>二</li>
							<li>三</li>
							<li>四</li>
							<li>五</li>
							<li>六</li>
							<li>日</li>
						</ul>
						<div class="calendar clear">
							<p></p><p></p><p></p><p></p><p><span>1</span><i class="red">愚人节</i></p><p><span class="red">2</span><i>廿五</i></p><p><span class="red">3</span><i>廿六</i></p><p><span>4</span><i>廿七</i></p><p><span>5</span><i class="red">清明</i></p><p><span>6</span><i>廿九</i></p><p><span>7</span><i>三月</i></p><p><span>8</span><i>初二</i></p><p><span>9</span><i>初三</i></p><p><span>10</span><i>初四</i></p><p class="mask"><span>11</span><i>初五</i></p><p><span>12</span><i>初六</i></p><p><span>13</span><i>初七</i></p><p><span>14</span><i>初八</i></p><p><span>15</span><i>初九</i></p><p><span>16</span><i>初十</i></p><p><span>17</span><i>十一</i></p><p><span>18</span><i>十二</i></p><p><span>19</span><i>十三</i></p><p><span>20</span><i>十四</i></p><p><span>21</span><i>十五</i></p><p><span>22</span><i>十六</i></p><p><span>23</span><i>十七</i></p><p class="mask"><span>24</span><i>十八</i></p><p><span>25</span><i>十九</i></p><p><span>26</span><i>廿十</i></p><p><span>27</span><i>廿一</i></p><p><span>28</span><i>廿二</i></p><p><span>29</span><i>廿三</i></p><p><span>30</span><i>廿四</i></p>
						</div>
					</div>
				</div>
				<div class="panel brand">
					<div class="title">汽车行业品牌榜</div>
					<div class="body">
						<table>
							<tr>
								<th>排名</th>
								<th>品牌</th>
								<th>搜索指数</th>
							</tr>
							<tr>
								<td>1</td>
								<td>大众</td>
								<td><div>48912001</div><div class="progress"><div class="dazhong"></div></div></td>
							</tr>
							<tr>
								<td>2</td>
								<td>丰田</td>
								<td><div>29307333</div><div class="progress"><div class="fengtian"></div></div></td>
							</tr>
							<tr>
								<td>3</td>
								<td>奥迪</td>
								<td><div>23139070</div><div class="progress"><div class="aodi"></div></div></td>
							</tr>
							<tr>
								<td>4</td>
								<td>本田</td>
								<td><div>22885564</div><div class="progress"><div class="bentian"></div></div></td>
							</tr>
							<tr>
								<td>5</td>
								<td>福特</td>
								<td><div>22324792</div><div class="progress"><div class="fute"></div></div></td>
							</tr>
							<tr>
								<td>6</td>
								<td>宝马</td>
								<td><div>21444077</div><div class="progress"><div class="baoma"></div></div></td>
							</tr>
							<tr>
								<td>7</td>
								<td>现代</td>
								<td><div>20114969</div><div class="progress"><div class="xiandai"></div></div></td>
							</tr>
							<tr>
								<td>8</td>
								<td>起亚</td>
								<td><div>19251680</div><div class="progress"><div class="qiya"></div></div></td>
							</tr>
							<tr>
								<td>9</td>
								<td>奔驰</td>
								<td><div>19172837</div><div class="progress"><div class="benchi"></div></div></td>
							</tr>
							<tr>
								<td>10</td>
								<td>别克</td>
								<td><div>18544027</div><div class="progress"><div class="bieke"></div></div></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</section>
	</section>
</body>
</html>